Gather pages based on keywords

動作している様子↓

https://scrapbox.io/files/69bd0335b9e150750aec5b5d.mp4

説明

code:script.js

import {ScrapboxParser} from '/api/code/customize/scrapbox-parser.min.js/parser.js';

window.ScrapboxParser = ScrapboxParser;

main();

scrapbox.on('page:changed', main);

async function main() {

// 初期化する。ページを遷移した時に、それまで挿入していたページカードを消す

cleaner();

// 現在開いているページがスクリプトを実行すべきページかどうか確認する

if (!(await isThereList())) return;

// ページカードを表示する場所を作る。関連ページリストの一番上に作る。

createContainer();

// ページのデータを取得する

const pages = await fetchPages();

// 取得したデータにページが存在しないとき、関数を終了する

if (pages.length === 0) {

report('noPages');

console.log('1 hop pages collector: noPages')

return;

}

// ページのデータを並べ替える。関連ページリストのSortの順番に並べ替える

const sorted = sortedPages(pages);

// ページカードを陳列する

insertPageCards(sorted); //This function use createPageCard()

}

isThereList()

code:script.js

async function isThereList() {

try {

const response = await fetch(url)

if (!response.ok) {

console.log("1 hop pages collector: This is not the page to run. There is no 'code:list'.")

return false;

}

const result = await response.json();

console.log("1 hop pages collector: This is the page to run. There is 'code:list'.")

return true;

} catch(error) {

console.log("1 hop pages collector: error");

return false

}

}

fetchPages()

code:script.js

async function fetchPages() {

console.log("1 hop pages collector: fetching...")

report('fetching')

const result = await response.json();

//親ページのリストを作成する

const parentPages = [];

//それぞれのprefixについてsufix違いの文字列を生成し、parentPages Arrayに格納する

for (const prefix of result.prefixes) {

for (const suffix of result.suffixes) {

parentPages.push(string);

}

}

console.log("1 hop pages collector: These are the parent pages you defined in the list.")

console.log(parentPages)

report('list', parentPages);

//子ページのリストを作成する

const pages = [];

//親ページにリンクしているページを集める

for (const parentPage of parentPages) {

const response = await fetch(url)

const result = await response.json();

const page = result.relatedPages.links1hop;

pages.push(...page);

}

// console.log(links1hopArray);

return pages;

}

sortedPages()

code:script.js

function sortedPages(pages) {

console.log("1 hop pages collector: sorting...")

report('sorting')

const sortType = localStorage.relatedPageSort;

// report('sortType', sortType)

switch (sortType) {

case '"related"':

case '"updated"':

case '"created"':

case '"accessed"':

case '"linked"':

case '"pageRank"':

return pages.sort((a, b) => a.sortType - b.sortType);

case '"title"':

return pages.sort((a, b) => a.title.localeCompare(b.title));

default:

return pages.sort((a, b) => a.related - b.related);

}

return sortedPages;

}

createContainer()

code:script.js

function createContainer() {

const div = document.createElement('div');

div.classList.add('pageCardWrapper');

const ul = document.createElement('ul')

ul.classList.add('grid')

div.appendChild(ul)

const linksContainer = document.querySelector('.links-container');

linksContainer.prepend(div);

}

insertPageCards()

code:script.js

function insertPageCards(sorted) {

report('remove');

const insertPlace = document.querySelector('.pageCardWrapper ul.grid');

for (const page of sorted) {

const pageCard = createPageCard(page);

insertPlace.insertAdjacentHTML('beforeend', pageCard);

}

}

createPageCard()

この関数内で使われてる関数

parse()

parse()の中ではmarkupLine()が使われてる

markupLine()の中ではmarkupNode()が使われてる

code:script.js

function createPageCard({project=scrapbox.Project.name, title, descriptions, imageUrl=undefined} = {}) {

const content = imageUrl ?

`<div class="icon">

<img loading="lazy" src="${imageUrl}">

</div>` :

return `

<li class="page-list-item grid-style-itme">

<a href="/${project}/${encodeURIComponent(title)}" rel="route">

<div class="hover"></div>

<div class="content">

<div class="header">

<div class="title">${title}</div>

</div>

${content}

</div>

</a>

</li>`;

console.log(element);

}

parse()

code:script.js

function parse(descriptions, project) {

const blocks = ScrapboxParser.parse(descriptions.join('\n'), {hasTitle: false});

return blocks.map(block => markupLine(block, project)).join('');

}

markupLine()

code:script.js

function markupLine(block, project) {

switch (block.type) {

case 'title': // タイトルは選択範囲に入らないので無視

case 'codeBlock':

case 'table':

case 'line':

if (block.nodes.length === 0) return '';

if (block.nodes.length === 1) {

if (node.type === 'blank') return '';

}

}

}

markupNode()

code:script.js

function markupNode(node, project) {

switch (node.type) {

case 'quote':

case 'image':

case 'strongImage':

case 'formula':

case 'googleMap':

return '';

case 'icon':

case 'strongIcon':

if (node.pathType ==='relative') {

}

case 'strong':

case 'decoration':

let result = node.nodes.map(node => convertNode(node)).join('');

return result;

case 'helpfeel':

case 'code':

case 'commandLine':

case 'link':

switch(node.pathType) {

case 'root':

case 'relative':

case 'absolute':

}

case 'hashTag':

case 'blank':

case 'plain':

return node.text;

}

}

containerに書き込むやつ()

code:script.js

function report(context, data) {

const insertPlace = document.querySelector('div.pageCardWrapper')

switch (context) {

case 'fetching':

insertPlace.insertAdjacentHTML('beforeend', pFetching);

break;

case 'list':

insertPlace.insertAdjacentHTML('beforeend', pList);

break;

case 'sorting':

insertPlace.insertAdjacentHTML('beforeend', pSorting);

break;

case 'sortType':

insertPlace.insertAdjacentHTML('beforeend', pSortType);

break;

case 'noPages' :

insertPlace.insertAdjacentHTML('beforeend', pNoPages);

break;

case 'remove':

const ul = document.createElement('ul');

ul.classList = 'grid';

insertPlace.replaceChildren(ul);

break;

}

}

cleaner()

code:script.js

function cleaner() {

const wrapper = document.querySelector('div.pageCardWrapper');

if (wrapper) wrapper.remove();

}

謝辞

次の2つのコードを使用しています

取得したページ情報からページカードを生成するプログラム

これらがなかったら完成しませんでした

ありがとうございます

追加した要素をdocumenから削除するやつ()

初期化する

こういうのが必要だっけ？

不要かも

ページを遷移するとページカードリストは消えてる

対応するページがなかったとき